<template>
  <router-link to="/">
    <div class="redirect-home">返回</div>
  </router-link>
  <div class="shop-info">
    <ShopInfo :shop="shop" :hidden-border="true" />
  </div>
  <ShopContent :cartList="cartList" />
  <Cart :cart-list="cartList" />
</template>

<script>
import ShopInfo from '@/components/ShopInfo'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import shopService from '@/api/service/shopService'
import ShopContent from '@/views/Shop/ShopContent'
import Cart from '@/views/Shop/Cart'
import { getCartList } from '@/views/Shop/useCartList'

function useShop (shopId) {
  const shop = ref({})
  const getShopInfo = async () => {
    console.log('route params', shopId)
    shop.value = await shopService.getShop(shopId)
  }
  return {
    shop,
    getShopInfo
  }
}

export default {
  name: 'Shop',
  components: {
    ShopContent,
    ShopInfo,
    Cart
  },
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const {
      shop,
      getShopInfo
    } = useShop(shopId)
    getShopInfo()
    const cartList = getCartList()
    return {
      shop,
      shopId,
      cartList
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-info {
  margin: 0.16rem .18rem 0 .18rem;
}

</style>
